<template>
       <div 
       	class="header"
       	v-show="showHeaderScorll"
       	:style="showOpacity"
       	>
                    城市选择
         <span class="iconfont">&#xe600;</span>
       </div>
</template>

<script>
    export default {
        name: "Header",
        data () {
        	 return {
        	 	 showHeaderScorll: false,
        	 	 showOpacity: {
        	 	 	opacity: 0
        	 	 }
        	 }
        },
        methods: {
        	handleScroll () {
        		//获取滚动条距顶部的滚动距离
        		const top = document.documentElement.scrollTop;
        		//console.log(top);
        		if(top > 120){ //如果滚动高度大于60，就计算他的透明度
        			 let opacity = top /140;
        			 opacity > 1 ? 1 : opacity; //最大值不能超过1
        			 this.showOpacity = {
        			 	 opacity
        			 }
        			 this.showHeaderScorll = true;
        		}else{
        			 this.showHeaderScorll = false;
        		}
        	}
        },
        mounted () {//生命周期函数
        	window.addEventListener('scroll',this.handleScroll); //监听滚动距离的变化
        }
    }
</script>

<style lang="stylus" scoped>
  .header
    position : fixed
    top : 0
    left : 0
    width : 100%
    height : .4rem
    background : #00bcd4
    text-align : center
    line-height : .4rem
    color : #ffffff
    font-size : .16rem
    span{
      position : absolute
      left : .10rem
    }
</style>
